import Vue from 'vue'
// 导入路由
import VueRouter from 'vue-router'

// 导入一个演示组件(以后改成导入我们自己准备好的组件)
import discover from '../views/discover'
import my from '../views/my'
import friend from '../views/friend'
import notfound from '../views/notfound'
// 导入子路由对应的组件
import toplist from '../views/toplist'
import playlist from '../views/playlist'

// 安装路由
Vue.use(VueRouter)

// 创建路由规则
const routes = [
  // 如果用户路径上输入的是/a那么会自动重定向到/discover
  // { path: '/a', redirect: '/discover'},
  // 如果像下面这样写，就代表毛都不输入，直接重定向到discover
  { path: '/', redirect: '/discover'},

  // 发现音乐
  // children就是用来设置子路由规则的
  { 
    path: '/discover', 
    component: discover, 
    children: [
      // 子路由这里的path不一般加/
      // 如果不加/，就代表访问时路径写 /discover/toplist，也就是要拼接父路由的路径
      // 如果加了 /，就代表访问时路径直接写 /toplist 也就是直接写子路由路径不用拼接
      { path: 'toplist', component: toplist },
      { path: 'playlist', component: playlist },
    ] 
  },
  { path: '/my', component: my },
  { path: '/friend', component: friend },

  // *代表除了上面路径以外的所有路径，都看到notfound的组件
  // 404的规则要写到最后
  { path: '*', component: notfound }
]

// 实例化路由对象
const router = new VueRouter({
  // 使用规则
  routes,
})

export default router
